<template>
    <!-- 折线图 -->
    <div ref="echarts" style="height: 230px"></div>
</template>

<script>
import { examInfo } from "@/api/sys/user/user";
//引入echarts
import * as echarts from "echarts";
import { mapGetters } from 'vuex';
export default {
  data(){
    return {
      list: []
    }
  },
  mounted() {
    //通过用户的id获取用户的考试信息：
    examInfo(this.userId).then(({data})=>{
      console.log(data);
      const myChart = echarts.init(this.$refs.echarts);
      data.map(item=>{
        this.list.push(item.userScore)
      })
      const lineOption = {
        legend: {
          // 图例文字颜色
          textStyle: {
            color: "#333",
          },
        },
        grid: {
          left: "20%",
        },
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category", // 类目轴
          data: data.map(item=>item.updateTime),         
          axisLine: {
            lineStyle: {
              color: "#17b3a3",
            },
          },
          axisLabel: {
            interval: 0,
            color: "#333",
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
          },
        ],
        color: [
          "#2ec7c9",
          "#b6a2de",
          "#5ab1ef",
          "#ffb980",
          "#d87a80",
          "#8d98b3",
        ],
        series: [
          {
            name: `用户近四日考试分数变化`,
            type:'line',
            data: this.list
          }
        ],
      };
      myChart.setOption(lineOption);
    })
  },
  computed:{
    ...mapGetters(['userId'])
  }
};
</script>

<style>
</style>